<template>
  <div>
    <span class="span">激活码为：88888888</span>
    <el-form :model="vipInfo" label-width="80px">
      <el-form-item label="激活码">
        <el-input
          v-model="vipInfo.activationCode"
          placeholder="请输入激活码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="activateVip">激活VIP</el-button>
      </el-form-item>
    </el-form>

    <!-- 提速按钮 -->
    <div class="pp" v-if="vipInfo.activated">
      <span>四个提速等级，每次提速2%</span>
    </div>

    <el-button-group v-if="vipInfo.activated">
      <el-button @click="speedUp(1)" type="success">提速按钮1</el-button>
      <el-button @click="speedUp(2)" type="success">提速按钮2</el-button>
      <el-button @click="speedUp(3)" type="success">提速按钮3</el-button>
      <el-button @click="speedUp(4)" type="success">提速按钮4</el-button>
      <el-button @click="speedUp(5)" type="success">提速按钮1</el-button>
      <el-button @click="speedUp(6)" type="success">提速按钮2</el-button>
      <el-button @click="speedUp(7)" type="success">提速按钮3</el-button>
      <el-button @click="speedUp(8)" type="success">提速按钮4</el-button>
      <el-button @click="speedUp(9)" type="success">提速按钮1</el-button>
      <el-button @click="speedUp(10)" type="success">提速按钮2</el-button>
    </el-button-group>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const vipInfo = ref({
  activationCode: "",
  activated: false,
});

const activateVip = () => {
  if (vipInfo.value.activationCode === "88888888") {
    vipInfo.value.activated = true;
    ElMessageBox.alert("VIP激活成功", "成功", {
      confirmButtonText: "确定",
      type: "success",
    });
  } else {
    ElMessage.error("激活码错误，请重新输入");
  }
};

const speedUp = (level) => {
  // 根据不同的提速等级设置进度条的值
  const percentage = level * 0.02;
  // 将进度条的值存到本地存储
  localStorage.setItem("percentage", percentage);
  ElMessage.success("文件上传已提速");
};
</script>

<style scoped>
.span {
  width: 100px;
  height: 50px;
  line-height: 50px;
}
.pp {
  width: 1000px;
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
}
</style>
